{% extends 'base.html' %}  

{% block title %}交易详情 - SaveStar{% endblock %}  

{% block page_title %}交易详情{% endblock %}  

{% block content %}  
<div class="row justify-content-center">  
    <div class="col-md-8">  
        <div class="card">  
            <div class="card-header d-flex justify-content-between align-items-center">  
                <h5 class="mb-0">交易详情</h5>  
                <div class="btn-group">  
                    <a href="{% url 'transaction_edit' transaction.uuid %}" class="btn btn-sm btn-primary">  
                        <i class="fas fa-edit"></i> 编辑  
                    </a>  
                    <a href="{% url 'transaction_delete' transaction.uuid %}" class="btn btn-sm btn-danger">  
                        <i class="fas fa-trash"></i> 删除  
                    </a>  
                </div>  
            </div>  
            <div class="card-body">  
                <div class="row mb-4">  
                    <div class="col-md-6">  
                        <h6 class="text-muted mb-1">交易名称</h6>  
                        <p class="fs-5">{{ transaction.name }}</p>  
                    </div>  
                    <div class="col-md-6 text-md-end">  
                        <h6 class="text-muted mb-1">交易金额</h6>  
                        <p class="fs-4 {% if transaction.type == 'income' %}text-success{% else %}text-danger{% endif %}">  
                            {% if transaction.type == 'income' %}+{% else %}-{% endif %}  
                            ¥{{ transaction.amount|floatformat:2 }}  
                        </p>  
                    </div>  
                </div>  
                
                <div class="row mb-3">  
                    <div class="col-md-6">  
                        <h6 class="text-muted mb-1">交易类型</h6>  
                        <p>  
                            <span class="badge {% if transaction.type == 'income' %}bg-success{% else %}bg-danger{% endif %}">  
                                {{ transaction.get_type_display }}  
                            </span>  
                        </p>  
                    </div>  
                    <div class="col-md-6">  
                        <h6 class="text-muted mb-1">交易时间</h6>  
                        <p>{{ transaction.transaction_date|date:"Y年m月d日 H:i" }}</p>  
                    </div>  
                </div>  
                
                <div class="row mb-3">  
                    <div class="col-md-6">  
                        <h6 class="text-muted mb-1">关联钱包</h6>  
                        <p>  
                            <i class="fas fa-{{ transaction.wallet.icon }} me-2"></i>  
                            {{ transaction.wallet.name }}  
                        </p>  
                    </div>  
                    <div class="col-md-6">  
                        <h6 class="text-muted mb-1">分类</h6>  
                        <p>  
                            {% if transaction.category %}  
                                <i class="fas fa-{{ transaction.category.icon|default:'tag' }} me-2"></i>  
                                {{ transaction.category.name }}  
                            {% else %}  
                                <span class="text-muted">未分类</span>  
                            {% endif %}  
                        </p>  
                    </div>  
                </div>  
                
                {% if transaction.notes %}  
                <div class="mb-3">  
                    <h6 class="text-muted mb-1">备注</h6>  
                    <div class="card bg-light">  
                        <div class="card-body py-2">  
                            {{ transaction.notes|linebreaks }}  
                        </div>  
                    </div>  
                </div>  
                {% endif %}  
                
                <div class="row">  
                    <div class="col-md-6">  
                        <h6 class="text-muted mb-1">创建时间</h6>  
                        <p>{{ transaction.created_at|date:"Y年m月d日 H:i" }}</p>  
                    </div>  
                    <div class="col-md-6">  
                        <h6 class="text-muted mb-1">最后更新</h6>  
                        <p>{{ transaction.updated_at|date:"Y年m月d日 H:i" }}</p>  
                    </div>  
                </div>  
            </div>  
            <div class="card-footer">  
                <div class="d-flex justify-content-between">  
                    <a href="{% url 'transaction_list' %}" class="btn btn-outline-secondary">  
                        <i class="fas fa-arrow-left me-1"></i> 返回列表  
                    </a>  
                    <a href="{% url 'transaction_add' %}" class="btn btn-primary">  
                        <i class="fas fa-plus me-1"></i> 新增交易  
                    </a>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
{% endblock %}